<template>
<div>
    <el-row>
        <el-col :span="12">
            <span class="travel_show_span">报销人归属部门</span>：{{dataFrom.deptNamePrint}}
        </el-col>
        <el-col :span="12">
            <span class="travel_show_span">姓名：</span>{{dataFrom.expenseNamePrint}}
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="12">
            <span class="travel_show_span">填报日期：</span>{{dataFrom.expenseTime}}
        </el-col>
        <el-col :span="12">
            <span class="travel_show_span">现金产生日期：</span>{{dataFrom.cashTimeStart}}至{{dataFrom.cashTimeEnd}}
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="12">
            <span class="travel_show_span">项目名称：</span>{{dataFrom.productNamePrint}}
        </el-col>
    </el-row>
    <div>
        <el-tag style="margin-bottom:2px">往返车票</el-tag>
        <el-table :data="itemData" show-summary :summary-method="getSummaries">
            <el-table-column prop="startTime" label="出发时间" width="160">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.changeTravelItemList[0].startTime,'{y}-{m}-{d} {h}:{i}') }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="invoiceNumSum" label="单据张数" :formatter="formatInvoiceNumSum" width="160"></el-table-column>
            <el-table-column prop="travelNum" label="出差天数" width="160"></el-table-column>
            <el-table-column prop="travelAllowance" label="补助金额" width="120"></el-table-column>
            <el-table-column prop="expenseMoneySum" label="总金额" :formatter="formatExpenseMoney" width="160"></el-table-column>
            
            <el-table-column prop="fileList" label="是否有附件" width="100">
                <template slot-scope="scope">
                    <span v-if="scope.row.fileInfoList && scope.row.fileInfoList.length>0">有</span>
                    <span v-else>无</span>
                </template>
            </el-table-column>
            <el-table-column prop="opt" label="操作">
                <template slot-scope="scope">
                    <el-button size="small" @click="showItemDetail(scope.row)">查看详情</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <div>
        <el-tag style="margin-bottom:2px;margin-top:25px;">市内车票/住宿</el-tag>
        <el-table :data="itemData1" show-summary :summary-method="getSummaries">
            <el-table-column prop="travelType" label="报销内容" :formatter="formatTravelType" width="120"></el-table-column>
            <el-table-column prop="startTime" label="发生日期" width="120">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.startTime,'{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="invoiceNum" label="单据张数" width="100"></el-table-column>
            <el-table-column prop="expenseMoney" label="金额" width="100"></el-table-column>
            <el-table-column prop="fileList" label="是否有附件" width="100">
                <template slot-scope="scope">
                    <span v-if="scope.row.fileInfoList && scope.row.fileInfoList.length>0">有</span>
                    <span v-else>无</span>
                </template>
            </el-table-column>
            <el-table-column prop="expenseRemark" label="备注" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="opt" label="操作" >
                <template slot-scope="scope">
                    <el-button size="small" @click="showItemDetail1(scope.row)">查看详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        
    </div>
        <el-dialog
            width="70%"
            title="填写现金单"
            :visible.sync="showItemVisible"
            append-to-body>
            <el-form :model="itemForm" ref="itemForm" label-width="80px" >


                <div class="div_travel" v-for="(changeTravelItem, index) in itemForm.changeTravelItemList" v-if="changeTravelItem.travelDirection == '1'">
                    <el-tag>出发</el-tag>
                    <el-row >
                        <el-col :span="8">
                            <span class="travel_show_span">出发时间：</span>{{parseTime(changeTravelItem.startTime,'{y}-{m}-{d} {h}:{i}')}}
                        </el-col>
                        <el-col :span="8">
                            <span class="travel_show_span">出发地：</span>{{changeTravelItem.beginPlace}}
                        </el-col>
                        <el-col :span="8">
                            <span class="travel_show_span">交通工具：</span>{{changeTravelItem.transportName}}
                        </el-col>
                    </el-row>

                    <el-row >
                        <el-col :span="8">
                            <span class="travel_show_span">到达时间：</span>{{parseTime(changeTravelItem.arriveTime,'{y}-{m}-{d} {h}:{i}')}}
                        </el-col>
                        <el-col :span="8">
                            <span class="travel_show_span">目的地：</span>{{changeTravelItem.endPlace}}
                        </el-col>
                        <el-col :span="8">
                            <span class="travel_show_span">单据张数：</span>{{changeTravelItem.invoiceNum}}
                        </el-col>
                    </el-row>
                    <el-row >
                        <el-col :span="8">
                            <span class="travel_show_span">金额：</span>{{changeTravelItem.expenseMoney}}
                        </el-col>
                    </el-row>
                </div>
                
                <div class="div_travel div_travel_top" v-for="(changeTravelItem, index) in itemForm.changeTravelItemList" v-if="changeTravelItem.travelDirection == '2'">
                    <el-tag v-if="itemForm.changeTravelItemList !== undefined && itemForm.changeTravelItemList.length > 0">中转</el-tag>
                    <el-row >
                        <el-col :span="8">
                            <span class="travel_show_span">出发时间：</span>{{parseTime(changeTravelItem.startTime,'{y}-{m}-{d} {h}:{i}')}}
                        </el-col>
                        <el-col :span="8">
                            <span class="travel_show_span">出发地：</span>{{changeTravelItem.beginPlace}}
                        </el-col>
                        <el-col :span="8">
                            <span class="travel_show_span">交通工具：</span>{{changeTravelItem.transportName}}
                        </el-col>
                    </el-row>

                    <el-row >
                        <el-col :span="8">
                            <span class="travel_show_span">到达时间：</span>{{parseTime(changeTravelItem.arriveTime,'{y}-{m}-{d} {h}:{i}')}}
                        </el-col>
                        <el-col :span="8">
                            <span class="travel_show_span">目的地：</span>{{changeTravelItem.endPlace}}
                        </el-col>
                        <el-col :span="8">
                            <span class="travel_show_span">单据张数：</span>{{changeTravelItem.invoiceNum}}
                        </el-col>
                    </el-row>
                    <el-row >
                        <el-col :span="8">
                            <span class="travel_show_span">金额：</span>{{changeTravelItem.expenseMoney}}
                        </el-col>
                    </el-row>
                </div>    

                <div class="div_travel div_travel_top" v-for="(changeTravelItem, index) in itemForm.changeTravelItemList" v-if="changeTravelItem.travelDirection == '3'">
                    <el-tag>返程</el-tag>
                    <el-row >
                        <el-col :span="8">
                            <span class="travel_show_span">出发时间：</span>{{parseTime(changeTravelItem.startTime,'{y}-{m}-{d} {h}:{i}')}}
                        </el-col>
                        <el-col :span="8">
                            <span class="travel_show_span">出发地：</span>{{changeTravelItem.beginPlace}}
                        </el-col>
                        <el-col :span="8">
                            <span class="travel_show_span">交通工具：</span>{{changeTravelItem.transportName}}
                        </el-col>
                    </el-row>

                    <el-row >
                        <el-col :span="8">
                            <span class="travel_show_span">到达时间：</span>{{parseTime(changeTravelItem.arriveTime,'{y}-{m}-{d} {h}:{i}')}}
                        </el-col>
                        <el-col :span="8">
                            <span class="travel_show_span">目的地：</span>{{changeTravelItem.endPlace}}
                        </el-col>
                        <el-col :span="8">
                            <span class="travel_show_span">单据张数：</span>{{changeTravelItem.invoiceNum}}
                        </el-col>
                    </el-row>
                    <el-row >
                        <el-col :span="8">
                            <span class="travel_show_span">金额：</span>{{changeTravelItem.expenseMoney}}
                        </el-col>
                    </el-row>
                </div>
                <el-row >
                    <el-col :span="8">
                        <span class="travel_show_span">出差天数：</span>{{itemForm.travelNum}}
                    </el-col>
                </el-row>
                <el-row >
                    <el-col :span="8">
                        <span class="travel_show_span">出差补助：</span>{{itemForm.travelAllowance}}
                    </el-col>
                </el-row>

                <el-form-item label="附件：">
                    <el-row>
                        <el-col :span="24" class="case_show_span">
                            <ul>
                                <li v-for="fileInfo in itemForm.fileInfoList" :key="fileInfo.fileId">
                                    <a target="_blank" :href="httpUrl + fileInfo.filePath">{{fileInfo.name}}</a>
                                </li>
                            </ul>
                        </el-col>
                    </el-row>
                </el-form-item>
                
                <el-form-item label="备注：" prop="expenseRemark">
                    {{itemForm.expenseRemark}}
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="cancle" @click="cancleItemForm">关闭</el-button>
            </div>
        </el-dialog>

        <!-- 打车/住宿明细页面 -->
        <el-dialog
            width="30%"
            title="填写现金单"
            :visible.sync="showItemVisible1"
            append-to-body>
            <el-form :model="itemForm1" ref="itemForm1" label-width="80px" >
                <el-row >
                    <el-col>
                        <span class="travel_show_span">报销内容：</span>{{itemForm1.travelTypeName}}
                    </el-col>
                 </el-row>
                <el-row >
                    <el-col>
                        <span class="travel_show_span">发生日期：</span>{{ parseTime(itemForm1.startTime,'{y}-{m}-{d}') }}
                    </el-col>
                 </el-row>
                <el-row >
                    <el-col>
                        <span class="travel_show_span">单据张数：</span>{{itemForm1.invoiceNum}}
                    </el-col>
                 </el-row>
                <el-row >
                    <el-col>
                        <span class="travel_show_span">金额：</span>{{itemForm1.expenseMoney}}
                    </el-col>
                 </el-row>
                <el-form-item label="附件：">
                    <el-row>
                        <el-col class="case_show_span">
                            <ul>
                                <li v-for="fileInfo in itemForm1.fileInfoList" :key="fileInfo.fileId">
                                    <a target="_blank" :href="httpUrl + fileInfo.filePath">{{fileInfo.name}}</a>
                                </li>
                            </ul>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="备注：" prop="expenseRemark">
                    {{itemForm1.expenseRemark}}
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="cancle" @click="cancleItemForm">关闭</el-button>
            </div>
        </el-dialog>
        <!-- 打车/住宿明细页面 结束 -->
</div>
</template>

<script>
import {getTravel } from "@/api/product/travel";

export default {
    name:"cashShow",
    props:{
        propTravelId:{
            type: Number,
            required: true
        },
    },
    data(){
        return {
            httpUrl:process.env.VUE_APP_BASE_API,
            dataFrom:{},
            itemData:[],
            itemForm:{},
            ecOptions:[],
            itemData1:[],
            itemForm1:{},
            transportOptions:{},
            showItemVisible:false,
            showItemVisible1:false
        }
    },
    created() {
        this.getDicts("travelType").then(response => {
            this.ecOptions = response.data;
        });
        this.getDicts("transport").then(response => {
            this.transportOptions = response.data;
        });
        this.showTravelFun(this.propTravelId);
    },
    watch: {
        propTravelId:function (val) {
            if(val){
                this.showTravelFun(val);
            }
        }
    },
    methods: {
        showTravelFun(travelId) {
            getTravel({travelId:travelId}).then(
                response => {
                    this.dataFrom = response.data.travelDomain;
                    this.itemData = response.data.itemMainDomain;
                    this.itemData1 = response.data.itemTaxiDomain;
                }
            )
        },
        //展示报销内容详情
        showItemDetail(row) {
            this.showItemVisible = true;
            this.itemForm = row;
        },
        //展示报销内容详情
        showItemDetail1(row) {
            this.showItemVisible1 = true;
            this.itemForm1 = row;
        },

        //格式化总票数
        formatInvoiceNumSum(row, column, cellValue, index) {
            let changeTravelItemList = row.changeTravelItemList 
            let changeTravelInvoiceNum = 0
            changeTravelItemList.forEach(item => {
                changeTravelInvoiceNum = changeTravelInvoiceNum + Number(item.invoiceNum)
            })
            return changeTravelInvoiceNum
        },
        //格式化差旅金额
        formatExpenseMoney(row, column, cellValue, index) {
            let changeTravelItemList = row.changeTravelItemList 
            let changeTravelMoney = 0
            changeTravelItemList.forEach(item => {
                changeTravelMoney = changeTravelMoney + Number(item.expenseMoney)
            })
            this.$set(row,"expenseMoneySum", Number(row.travelAllowance) +changeTravelMoney)
            return Number(row.travelAllowance) +changeTravelMoney
        },
        //格式化报销内容
        formatTravelType(row, column, cellValue, index) {
            for(var i in this.ecOptions){
                if(this.ecOptions[i].dictValue == cellValue){
                    return this.ecOptions[i].dictLabel;
                }
            }
        },
        //合计逻辑
        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
            if (index === 0) {
                sums[index] = '合计';
                return;
            }
            if (column.property == "costTime" || column.property == "expenseRemark") {
                return;
            }
            const values = data.map(item => Number(item[column.property]));
            if (!values.every(value => isNaN(value))) {
                sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                    return (prev*100 + curr*100)/100;
                } else {
                    return prev/100;
                }
                }, 0);
            } else {
                sums[index] = '';
            }
            });

            return sums;
        },
        //关闭弹窗
        cancleItemForm() {
            this.showItemVisible= false;
            this.showItemVisible1= false;
            this.itemForm={}
            this.itemForm1={}
        },
    }
}
</script>

<style>
  .div_travel{
      border-bottom:1px solid #DCDFE6
  }
  .div_travel_top{
      margin-top:5px
  }
</style>